<template>
  <router-view>
    <div class="app-body">
      <div class="cells">
        <div class="cell cell-access">
          <div class="cell-bd">报名人信息</div>
          <div class="cell-ft">少女阿C (13162023630)</div>
        </div>
      </div>

      <div class="goods">
        <div class="goods-hd">
          <img :src="avatar">
          茶韵体验店
        </div>
        <activity-item :item="activity"></activity-item>
      </div>

      <div class="cells">
        <label class="cell">
          <div class="cell-bd">可用20积分抵用￥20</div>
          <div class="cell-f">
            <input type="checkbox" class="checkbox">
          </div>
        </label>
      </div>
      <div class="cells-tip">
        此活动只有在参与人数达到4人才会举行，若没有达到，钱会退回到原账户中。
      </div>
    </div>

    <div class="footer">
      <div class="footer-bd">费用：<em>￥200.00</em></div>
      <router-link to="/success/报名成功/恭喜您报名成功，请按时参加活动" class="footer-btn">微信支付</router-link>
    </div>
  </router-view>
</template>

<script>
import ActivityItem from '@/components/ActivityItem'

import avatar from '@/assets/img/tmp/avatar.jpg'
import face from '@/assets/img/tmp/face.jpg'

export default {
  data () {
    return {
      avatar,
      activity: { face, name: '以茶会友交流会', address: '上海市浦东新区紫薇路' }
    }
  },
  components: {
    ActivityItem
  }
}
</script>

<style lang="scss" scoped>
.goods {
  margin-top: 10px;
  background: $bg;

  &-hd {
    padding: 10px;
    border-bottom: 1px solid $border-color;

    // avatar
    > img {
      margin-right: 10px;
      height: 2em;
      border-radius: 100%;
      vertical-align: middle;
    }
  }
}
</style>
